<template>
<div class="activList">
  <el-form ref="activitiesFilter" :model="activities" :size="defaultFormItemSize" label-width="120px" label-position="right" @submit.native.prevent class="px20 bgWhite">
    <filter-box :item-width="350">
      <el-form-item label="活动名称" prop="formFilter.keywords">
        <el-input class="filter-item" v-model="activities.formFilter.keywords" :clearable="true" placeholder="请输入活动名称" />
      </el-form-item>
      <el-form-item label="服务对象" prop="formFilter.serveCategory">
        <el-select v-model="activities.formFilter.serveCategory" :clearable="true" placeholder="服务对象" class="filter-item">
          <el-option v-for="item in serveCategoryList" :key="item.id" :value="item.id" :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属品牌项目" prop="formFilter.projectId">
        <el-select v-model="activities.formFilter.projectId" :clearable="true" placeholder="所属品牌项目" class="filter-item">
          <el-option v-for="item in projectList" :key="item.id" :value="item.id" :label="item.projectName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间" prop="formFilter.dateRange">
        <el-date-picker v-model="activities.formFilter.dateRange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="发布范围" prop="formFilter.range">
        <el-select v-model="activities.formFilter.activitiesType" :clearable="true" placeholder="发布状态" class="filter-item">
          <el-option v-for="item in statusList" :key="item.status" :value="item.status" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" prop="formFilter.status">
        <el-select v-model="activities.formFilter.activitiesType" :clearable="true" placeholder="发布状态" class="filter-item">
          <el-option v-for="item in statusList" :key="item.status" :value="item.status" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-button slot="operator" type="default" :size="defaultFormItemSize" @click="onResetActivities">重置</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" @click="refreshActivities(true)">查询</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('activies:activies:add')" @click="onAdd()">
        新建
      </el-button>
    </filter-box>
  </el-form>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <span>共查询到 {{activities.Activity.impl.totalCount}} 条数据</span>
      <!-- <el-select v-model="sort" placeholder="请选择排序条件" style="float: right;top:-5px" :size="defaultFormItemSize">
        <el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select> -->
    </div>
    <div v-for="(item,index) in activities.Activity.impl.dataList" :key="index" :class="index == 0 ? '':'mt10'">
      <el-row :gutter="24">
        <el-col :span="4">
          <div class="imgLimit" :style="{background: 'url(' + setPreviewUrl(item) + ')', backgroundSize:'cover', backgroundPosition: 'center'}">

            <!-- <img :src="setPreviewUrl(item)" alt="" class="img"> -->
          </div>
        </el-col>
        <el-col :span="20" class="right">
          <div class="first mb20">
            <div class="activityTitle" @click="handleDetail(item)">{{item.activityName}}</div>
          </div>
          <div class="second mb20">
            <span v-for="(row,rowIndex) in renderItem" :class="(rowIndex != renderItem.length -1) ? 'mr18' : ''">
              <span class="label">{{row.label}}：</span>
              <span>{{item[row.column]}}</span>
            </span>
          </div>
          <div class="first">
            <div class="">
              <span class="mr10">
                <span class="label">活动起止时间：</span>
                <span>{{item.startDate}}至{{item.endDate}}</span>
              </span>
              <span class="mr10 item">
                <span class="label">活动地点：</span>
                <span> {{item.address}}</span>
              </span>
            </div>
            <div class="text-right">
              <el-button type="text" @click="handleEdit(item)">编辑</el-button>
              <el-button type="text" class="deleteText" @click="handleDelete(item)">删除</el-button>
            </div>
          </div>
          <!-- <div class="remark first">
            <div class="">
            </div>
            <div class="">
              <el-button type="text" @click="handleEdit(item)">编辑</el-button>
              <el-button type="text" class="deleteText" @click="handleDelete(item)">删除</el-button>
            </div>
            <div class="">
              <span class="mr10">重新编辑</span>
              <span class="mr10">下线</span>
              <span class="mr10">预览</span>
              <span class="mr10">分享</span>
              <el-dropdown size="mini">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>列表置顶</el-dropdown-item>
                  <el-dropdown-item>推荐首页</el-dropdown-item>
                  <el-dropdown-item>上移</el-dropdown-item>
                  <el-dropdown-item>下移</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div> -->
        </el-col>
      </el-row>
    </div>
    <el-row type="flex" justify="end" style="margin-top: 10px;" v-if="activities.Activity.impl.totalCount>0">
      <el-pagination :total="activities.Activity.impl.totalCount" :current-page="activities.Activity.impl.currentPage" :page-size="activities.Activity.impl.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes"
        @current-change="activities.Activity.impl.onCurrentPageChange" @size-change="activities.Activity.impl.onPageSizeChange">
      </el-pagination>
    </el-row>
  </el-card>
</div>
</template>
<script>
import {
  TableWidget
} from '@/utils/widget.js';
import {
  ActivityController
} from '@/api';
import projectConfig from '@/core/config';
import qs from 'qs'
export default {
  name: "",
  props: {
    status: {
      type: String,
      default: '0'
    },
    statusList: {
      type: Array,
      default: () => []
    },
    serveCategoryList: {
      type: Array,
      default: () => []
    },
    projectList:{
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      activities: {
        formFilter: {
          dateRange: []
        },
        Activity: {
          impl: new TableWidget(this.loadData, true, true, true, 'createTime', 0)
        },
        isInit: false
      },
      total: 0,
      tableList: [],
      sortOptions: [],
      sort: "",
      renderItem: [{
        label: "服务类别",
        column: "serveCategoryStr"
      }, {
        label: "服务对象",
        column: "serveTargetStr"
      }, {
        label: "负责人",
        column: "director"
      }, {
        label: "联系方式",
        column: "directorPhone"
      }],
      remarkItem: [{
        label: "提交人",
        column: ""
      }, {
        label: "提交时间",
        column: ""
      }, {
        label: "发布时间",
        column: ""
      }],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  methods: {
    onResetActivities() {
      this.$refs.activitiesFilter.resetFields();
      this.refreshActivities(true);
    },
    refreshActivities(reloadData = false) {
      if (reloadData) {
        this.activities.Activity.impl.refreshTable(true, 1);
      } else {
        this.activities.Activity.impl.refreshTable();
      }
      if (!this.activities.isInit) {
        // 初始化下拉数据
      }
      this.activities.isInit = true;
    },
    loadData(params) {
      if (params == null) params = {};
      params = {
        ...params
      }
      this.activities.formFilter.activityStatus = this.status;
      params.dto = this.activities.formFilter;
      return new Promise((resolve, reject) => {
        ActivityController.list(this, params).then(res => {
          resolve({
            dataList: res.data.dataList,
            totalCount: Number(res.data.totalCount)
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    setPreviewUrl(item) {
      if (item.coverImage && item.coverImage.length > 0) {
        return projectConfig.baseUrl + "admin/upms/file/download?filename=" + item.coverImage[0]
      }
    },
    handleEdit(item) {
      let me = this;
      ActivityController.info(me, qs.stringify({
        id: item.activityId
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        },
      }).then(res => {
        me.$emit("handleEdit", res.data)
      })
    },
    handleDetail(item) {
      let me = this;
      ActivityController.info(me, qs.stringify({
        id: item.activityId
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        },
      }).then(res => {
        me.$emit("handleDetail", res.data)
      })
    },
    handleDelete(item) {
      let params = {};
      params.id = item.id;
      this.$confirm('是否删除此活动？').then(res => {
        ActivityController.delete(this, qs.stringify({
          id: item.activityId
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
          }
        }).then(res => {
          this.$message.success('删除成功');
          this.activities.Activity.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
    onAdd() {
      this.$emit("onAdd")
    }
  },
  mounted() {
    this.refreshActivities();
  }
}
</script>
<style lang="scss" scoped>
.imgLimit {
    height: 120px;
    // border: 1px solid #ccc;
    width: 98%;
    margin: auto;
    .img {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
}
.first {
    display: flex;
    justify-content: space-between;
    .activityTitle {
        font-size: 16px;
        color: #409EFF;
        &:hover {
            cursor: pointer;
        }
    }
}
.right {
    // padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
.remark {
    .font {
        color: #999999;
    }

}
.statusBtn {
    margin-right: 10px;
}
.deleteText {
    color: #EF696B;
    &:hover {
        color: #EB4446;
    }
}
.label {
    color: #808088;
}
.item {
    display: inline-block;
}
</style>
